	<template>
		<view class="content">
			<!-- 卡片1 -->
			<view class="card-1">
				<!-- 定位 -->
				<view class="location">
					<view class="left">
						<text class="icon">定位图标</text>
						<text class="locatin-name">
							我的校区:没雨溪社区
						</text>
					</view>
					<view class="right">
						<view class="icon">

						</view>
						<view class="">
							切换
						</view>
					</view>
				</view>
				<!-- 轮播图 -->
				<view class="swiper">
					<swiper class="sw" indicator-dots indicator-color="#DDDDDD" circular indicator-active-color="#333333"
						autoplay interval="2000">
						<swiper-item v-for="item in pictures" :key="item.id">
							<image @load="swiperLoad" :src="item.imgurl"></image>
						</swiper-item>
					</swiper>
				</view>
				<!-- 类目 -->
				<view class="category">
					<view class="category-item" @click="goProductList(item.category_id,item.categoryName)"
						v-for="item in category" :key="item._id">
						<image class="img" mode="aspectFill" :src="item.categoryImgurl">

						</image>
						<view class="text">
							{{item.categoryName}}
						</view>
					</view>
				</view>
			</view>
			<!-- 卡片2 -->
			<view class="card-2">
				<view class="zero-shoping">
					<view class="title">
						0元购
					</view>
					<view class="goods">
						<swiper class="swiper" autoplay circular interval="3000" :indicator-dots="false"
							indicator-active-color="red">
							<swiper-item v-for="item in zeroBuy" :key="item">
								<uni-grid :column="3" :show-border="false" :highlight="true" @change="change">
									<uni-grid-item v-for="(goods,index) in item" :index="index" :key="index"
										@tap="goProductDetail(goods)">
										<view class="grid-item-box">
											<image :src="goods.imageUrl" class="image" mode="aspectFill" />
											<text class="text">{{ goods.productName }}</text>
											<view class="price">
												<view class="p" style="text-decoration: line-through;">¥{{goods.price}}
												</view>
												<view class="b">立即抢</view>
											</view>
										</view>
									</uni-grid-item>
								</uni-grid>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
			<view class="card-3">
				<view class="choiceness">
					<view class="title">
						精选·推荐
					</view>
					<view class="goods">
						<view class="goods-item" v-for="item in product" :key="item._id" @click="goProductDetail(item)">
							<image class="img" :src="item.imageUrl" mode="aspectFill"></image>
							<view class="text">
								{{item.productName}}
							</view>
							<view class="price">
								¥{{item.price}}
							</view>
						</view>


					</view>
				</view>
			</view>
		</view>
	</template>

	<script setup>
		import * as api from "@/api/picture.js"
		import * as categoryApi from "@/api/category.js"
		import * as productApi from "@/api/product.js"
		import { ref, reactive, watch } from "vue"
		import { onShow, onReady, onPullDownRefresh } from "@dcloudio/uni-app"

		//跳转到详情页

		let goProductDetail = (item) => {
			// #ifdef APP-PLUS
			getApp().globalData.productInfo = {
				product_id: item.product_id,
				productName: item
					.productName
			}
			// #endif

			uni.navigateTo({
				url: `/pages/productDetail/productDetail?product_id=${item.product_id}&productName=${item.productName}`
			})
		}

		//跳转到列表页

		let goProductList = (category_id, categoryName) => {

			uni.navigateTo({
				url: "/pages/productList/productList?category_id=" + category_id + "&categoryName=" + categoryName
			})
		}

		//监听下拉
		onPullDownRefresh(() => {
			getPageData();
			//停止下拉加载动画
			uni.stopPullDownRefresh()
		})
		//加载统计

		let loadDone = ref([])
		let swiperDone = ref([])
		let swiperLoad = () => {
			swiperDone.value.push('swdone')
		}
		//侦听如果3个内容都加载完成,那么关闭加载动画
		watch([loadDone, swiperDone], (newVal) => {
			// console.log('123',swiperDone.value.length)
			if (loadDone.value.length === 3 && swiperDone.value.length == pictures.value.length) {
				uni.hideLoading()
				loadDone.value = []
			}
		}, {
			deep: true
		})

		//响应式数据
		let pictures = ref([]);

		//获取轮播图
		let getPicture = async () => {
			try {
				let res = await api.getPictureApi();
				// console.log(res)
				pictures.value = res.data;
				loadDone.value.push(1)
			} catch (e) {
				uni.showToast({
					icon: "error",
					title: e.toString()
				})
			}
		}

		//获取类目
		let category = ref([])
		let getCategory = async () => {
			try {
				let res = await categoryApi.getCategoryApi();
				// console.log(res)
				category.value = res.data;
				loadDone.value.push(2)
			} catch (e) {
				console.log(e)
			}
		}


		//获取商品
		let product = ref([])
		let zeroBuy = reactive([])
		let getProduct = async () => {
			try {
				let res = await productApi.getProductApi()
				// console.log(res)
				product.value = res.data;
				//将带有isZero为true的商品处理成零元购数据,处理成一个二维数组
				let zeros = product.value.filter(item => {
					return item.isZero
				})
				// console.log(zeros)
				while (zeros.length) {
					zeroBuy.push(zeros.splice(0, 3))
				}
				// console.log(zeroBuy)
				loadDone.value.push(3)
			} catch (e) {

			}
		}
		//声明0元购区域的数据
		//事件
		let change = () => {
			console.log(123)
		}
		//数据
		let list = ref([])

		//获取页面数据

		let getPageData = () => {
			uni.showLoading({
				title: '加载中'
			})
			getPicture()
			getCategory()
			getProduct()
		}

		onShow(() => {

			getPageData()
		})
	</script>

	<style scoped lang="scss">
		.card-3 {
			background-color: #fff;
			padding: 0 15px;

			.choiceness {
				.title {
					font-size: 20px;
					font-weight: bolder;
					text-align: center;
					height: 45px;
					color: #383838
				}

				.goods {
					// border-top: 2px solid #BBBBBB;
					display: flex;
					justify-content: space-between;
					align-items: center;
					flex-wrap: wrap;

					.goods-item {

						margin: 10px 0;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						width: 312rpx;
						// height:245px;
						box-sizing: border-box;
						padding-bottom: 20px;
						box-shadow: 1px 1px 25px 5px #bbb;
						border-radius: 8%;

						.img {
							border-radius: 8% 8% 0 0;
							height: 160px;
							width: 100%;
							// border: 1px solid #ccc;
						}

						.text {
							height: 37px;
							margin-top: 5px;
							// border: 1px solid #ccc;
						}

						.price {
							height: 18px;
						}
					}
				}
			}
		}

		.card-2 {
			margin-top: 20px;
			background-color: #fff;

			.zero-shoping {

				/*#ifdef MP-WEIXIN*/
				uni-grid {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				uni-grid-item {
					flex: 1
				}

				/* #endif */

				.title {
					font-weight: bolder;
					text-align: center;
					padding-top: 15px;
					color: rgba(255, 52, 37, 1);
					font-size: 18px;
					width: 750rpx;
					height: 50px;
				}

				.image {
					width: 25px;
					height: 25px;
				}

				.text {
					font-size: 14px;
					margin-top: 5px;
				}


				.grid-dynamic-box {
					margin-bottom: 15px;
				}

				.grid-item-box {
					flex: 1;
					// position: relative;
					/* #ifndef APP-NVUE */
					display: flex;
					/* #endif */
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 15px 0;

					.image {
						width: 242rpx;
						height: 122px;
						border-radius: 5%;
					}

					.price {
						width: 202rpx;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						margin-top: 5px;

						.b {

							font-size: 12px;
							height: 20px;
							width: 40%;
							text-align: center;
							background-color: #E87B7B;
							color: #fff;
						}

						.p {
							color: #F03939;
							text-align: left;
							height: 20px;
							width: 70%;
							padding-left: 5px;
							background-color: rgb(251, 231, 231);
						}
					}

				}

				.grid-item-box-row {
					flex: 1;
					// position: relative;
					/* #ifndef APP-NVUE */
					display: flex;
					/* #endif */
					flex-direction: row;
					align-items: center;
					justify-content: center;
					padding: 15px 0;
				}

				.grid-dot {
					position: absolute;
					top: 5px;
					right: 15px;
				}

				.swiper {
					height: 190px;
				}

				/* #ifdef H5 */
				@media screen and (min-width: 768px) and (max-width: 1425px) {
					.swiper {
						height: 630px;
					}
				}

				@media screen and (min-width: 1425px) {
					.swiper {
						height: 830px;
					}
				}

				/* #endif */

			}
		}




		.card-1 {
			background-color: #fff;

			.location {
				padding: 0 8rpx;
				margin: 5px 0;
				display: flex;
				justify-content: space-between;

				.left {
					min-width: 292rpx;
					height: 20px;
				}

				.right {
					min-width: 70rpx;

				}
			}

			.swiper {
				height: 149px;
				width: 750rpx;

				.sw,
				swiper-item,
				image {
					width: 100%;
					height: 100%;
				}

			}

			.category {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10px 15px 20px;
				flex-wrap: wrap;
				padding-left: 60rpx;

				.category-item {
					border-radius: 10%;
					width: 110rpx;
					font-size: 12px;
					// border: 1px solid #ccc;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					margin-right: calc((100% - 110rpx * 5)/4);
					margin-top: 20px;

					.img {
						border-radius: 10%;
						width: 100rpx;
						height: 55px;
						// border: 1px solid red;
					}

					.text {
						width: 100%;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						text-align: center;
					}
				}
			}
		}
	</style>